'use client'

import { useState, useRef, useEffect } from 'react'
import { gsap } from 'gsap'
import useOnScreen from '../../hooks/useOnScreen'

const partners = [
  { name: 'SCHENDER', logo: 'SCHENDER' },
  { name: '玛缇瓷磗', logo: '玛缇瓷磗' },
  { name: '秦匠安裝', logo: '秦匠安裝' },
  { name: '大角鹿岩板', logo: '大角鹿岩板' },
  { name: '简一大理石瓷砖', logo: '简一大理石瓷砖' },
  { name: '东鹏瓷砖', logo: '东鹏瓷砖' },
  { name: '马可波罗瓷砖', logo: '马可波罗瓷砖' },
  { name: '诺贝尔瓷砖', logo: '诺贝尔瓷砖' }
]

const statsData = [
  { value: 100, suffix: '+', label: '合作品牌', color: 'text-blue-600' },
  { value: 10000, suffix: '+', label: '终端门店', color: 'text-green-400' },
  { value: 5, suffix: '年+', label: '深度服务', color: 'text-blue-600' },
  { value: 50000, suffix: '+', label: '服务案例', color: 'text-green-400' }
]

export default function PartnersSection() {
  const [hoveredPartner, setHoveredPartner] = useState<string | null>(null)
  const statsRef = useRef<HTMLDivElement>(null)
  const isStatsVisible = useOnScreen(statsRef)
  const [hasAnimated, setHasAnimated] = useState(false)
  
  const numberRefs = useRef<(HTMLDivElement | null)[]>([])
  const containerRefs = useRef<(HTMLDivElement | null)[]>([])

  useEffect(() => {
    if (isStatsVisible && !hasAnimated && numberRefs.current.length > 0) {
      setHasAnimated(true)
      
      // 创建时间线动画
      const tl = gsap.timeline()
      
      // 首先让容器从下方滑入
      tl.fromTo(containerRefs.current, {
        y: 50,
        opacity: 0
      }, {
        y: 0,
        opacity: 1,
        duration: 0.6,
        stagger: 0.1,
        ease: "back.out(1.7)"
      })
      
      // 然后数字递增动画
      statsData.forEach((stat, index) => {
        const element = numberRefs.current[index]
        if (element) {
          const obj = { value: 0 }
          tl.to(obj, {
            value: stat.value,
            duration: 2,
            ease: "power2.out",
            onUpdate: () => {
              const currentValue = Math.floor(obj.value)
              element.textContent = `${currentValue.toLocaleString()}${stat.suffix}`
            }
          }, "-=1.5") // 与容器动画重叠
        }
      })
    }
  }, [isStatsVisible, hasAnimated])

  return (
    <section className="py-16 bg-gray-50 dark:bg-gray-900 border-t-2 border-b-2 border-black dark:border-white">
      <div className="max-w-7xl mx-auto px-6">
        {/* 标题 */}
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-black text-black dark:text-white mb-4">
            蜜多云与他们携手共进
          </h2>
          <p className="text-xl font-medium text-gray-600 dark:text-gray-400">
            加速终端经营增长
          </p>
        </div>

        {/* Logo滚动带 */}
        <div className="relative overflow-hidden">
          <div className="flex animate-infinite-scroll hover:pause">
            {/* 第一组 */}
            {partners.map((partner, index) => (
              <div
                key={`first-${index}`}
                className="flex-shrink-0 mx-8 transition-all duration-300"
                onMouseEnter={() => setHoveredPartner(partner.name)}
                onMouseLeave={() => setHoveredPartner(null)}
                data-cursor-text="view"
              >
                <div className={`
                  neo-brutal-card p-6 min-w-[200px] h-24 flex items-center justify-center
                  ${hoveredPartner === partner.name ? 'bg-blue-600 text-white' : 'bg-white dark:bg-gray-800'}
                  ${hoveredPartner === partner.name ? 'transform scale-110' : ''}
                  ${hoveredPartner && hoveredPartner !== partner.name ? 'opacity-50' : 'opacity-100'}
                `}>
                  <span className="text-lg font-bold text-center">
                    {partner.logo}
                  </span>
                </div>
              </div>
            ))}
            
            {/* 第二组（用于无缝滚动） */}
            {partners.map((partner, index) => (
              <div
                key={`second-${index}`}
                className="flex-shrink-0 mx-8 transition-all duration-300"
                onMouseEnter={() => setHoveredPartner(partner.name)}
                onMouseLeave={() => setHoveredPartner(null)}
                data-cursor-text="view"
              >
                <div className={`
                  neo-brutal-card p-6 min-w-[200px] h-24 flex items-center justify-center
                  ${hoveredPartner === partner.name ? 'bg-blue-600 text-white' : 'bg-white dark:bg-gray-800'}
                  ${hoveredPartner === partner.name ? 'transform scale-110' : ''}
                  ${hoveredPartner && hoveredPartner !== partner.name ? 'opacity-50' : 'opacity-100'}
                `}>
                  <span className="text-lg font-bold text-center">
                    {partner.logo}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 统计数据 */}
        <div ref={statsRef} className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16">
          {statsData.map((stat, index) => (
            <div 
              key={index}
              ref={el => containerRefs.current[index] = el}
              className="text-center"
            >
              <div 
                ref={el => numberRefs.current[index] = el}
                className={`text-4xl font-black ${stat.color} mb-2`}
              >
                0{stat.suffix}
              </div>
              <div className="text-sm font-medium text-gray-600 dark:text-gray-400">
                {stat.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
} 